<!--  -->
<template>
  <div>
   <el-button type="primary" @click="dialogVisible = true">添加视频</el-button>
   <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <el-form >
    <el-form-item label="视频名称">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="视频地址">
      <el-input v-model="form.iframe_url"></el-input>
    </el-form-item>
    <el-form-item label="视频图片浏览">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="form.img" :src="form.img" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>   
    
    
  </el-form>
  <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="postVideo">确 定</el-button>
  </span>
</el-dialog>
    <el-table :data="videoList" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="150"></el-table-column>
      <el-table-column label="封面">
                <template>
                    <img class="pic" :src="form.img" alt />
                </template>
            </el-table-column>
      <el-table-column prop="title" label="视频名称" width="700"></el-table-column>
      <el-table-column prop="city" label="详情" width="120">
           <template slot-scope="scope">
                    <el-button type="text" @click="liulan = true;getDetail(scope.row.iframe_url)">浏览视频</el-button>
                </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button> -->
          <el-button type="primary" icon="el-icon-edit" circle @click="bianji = true"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delVideo(scope.row.id)"></el-button>
          <!-- ######################################################################################### -->
            
            <!-- 编辑按钮部分 -->
            <el-dialog title="提示" :visible.sync="bianji" width="30%" :append-to-body="true">
              <el-form>
                  <el-form-item label="视频名称">
                      <el-input v-model="form.title"></el-input>
                  </el-form-item>
                  <el-form-item label="视频链接">
                      <el-input v-model="form.iframe_url"></el-input>
                  </el-form-item>
              </el-form>
              
            <span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="updateVideo(scope.row.id)">确 定</el-button>
            </span>
        </el-dialog>
            
        <!-- 浏览视频部分 -->
        
            <el-dialog title="视频浏览" :visible.sync="liulan" width="60%" :append-to-body="true"  custom-class="menu-dialog-height">
                <div class="iframeVideo" v-html="video_url">
                </div>
                
            </el-dialog>
       
          
          
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
        imgUrl:"http://127.0.0.1:7001",
        videoList:[],
        bianji : false, // 编辑按钮开关
        shanchu : false, // 删除按钮开关
        add:false, // 添加按钮开关
        liulan:false,
        video_url:"",
        videoIsShow:true,
        dialogVisible: false,
        form:{
            title:"",
            iframe_url:"",
            img:""
        }
    };
  },
  methods:{
      getDetail(video_url) {
            this.videoIsShow = true;
            this.video_url = video_url;
            console.log(video_url)
        },
      lookVideo(row) {
        console.log(row);
      },
    //   获取数据
    getVideoList(){
        axios.get("http://127.0.0.1:7001/api/video").then(res =>{
            console.log(res.data.data);
            this.videoList = res.data.data
        })
    },
    
    postVideo(){
        axios.post("http://127.0.0.1:7001/api/video",{form:this.form}).then(res =>{
          console.log(res.data);
          console.log(this.form);
        })
    },

    // 删除
    delVideo(index){
      console.log(index);
        axios.delete(`http://127.0.0.1:7001/api/video/${index}`).then(res =>{
            location.reload("/video")
            console.log(res.data.data);
        })
    },
    // 修改
    updateVideo(index){
      console.log(index);
        axios.put(`http://127.0.0.1:7001/api/video/${index}`,{
          form:this.form
        }).then(res =>{
            location.reload("/video")
            console.log(res.data.data);
        })
    },

    // 处理图片
     handleAvatarSuccess(res,file) {
        this.form.img = URL.createObjectURL(file.raw);
        console.log(res);
        console.log(this.form);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        
        return isJPG && isLt2M;
      },
     
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getVideoList();
  },

};
</script>
<style>
    .menu-dialog-height{
        height: 600px;
    }
    /* 设置浏览视频的高度 */
    .iframeVideo iframe{
        
        height: 500px;
        width: 800px;
        
    }
    .video .pic {
    width: 50px;
    height: 50px;
}


/* 上传图标样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>